/* 轮播图 */


const imgBox = document.querySelector('.imgBox')
const bgc = document.querySelector('.bgc')
const pointBox = document.querySelector('.pointBox')
const bgc_width = bgc.clientWidth
let index = 1
let timer = 0
let flag = true
copyEle()
function copyEle () {
    const first = imgBox.firstElementChild.cloneNode(true)
    const last = imgBox.lastElementChild.cloneNode(true)
    imgBox.appendChild(first)
    imgBox.insertBefore(last, imgBox.firstElementChild)
    imgBox.insertBefore(last, imgBox.firstElementChild)
    imgBox.style.width =imgBox.children.length * 100 + '%'
    imgBox.style.left = -bgc_width + 'px'
}
setPoint()
function setPoint () {
    const pointNum = imgBox.children.length - 2
    for (var i = 0; i < pointNum; i++) {
        const li = document.createElement('li')
        if(i === 0) li.className = 'active'
        li.classList.add('item')
        li.dataset.point = i
        pointBox.appendChild(li)
    }
    pointBox.style.width = pointNum * (20 + 10) + 'px'
}
autoPlay()
function autoPlay () {
    timer = setInterval(() => {
        index++
        // move(imgBox, {left: -index * bgc_width}, moveEnd)
        move(imgBox, { left: -index * bgc_width }, moveEnd)
    }, 2000);
}
function moveEnd (){
    if (index === imgBox.children.length - 1) {
        index = 1
        imgBox.style.left = -index * bgc_width + 'px'
    }
    if (index === 0){
        index = index.children.length - 2
        imgBox.style.left = -index * bgc_width + 'px'
    }
    for (let i = 0; i < pointBox.children.length; i++) {
        pointBox.children[i].classList.remove('active')
    }
    // pointBox.children[i - 1].classList.add('active')
    pointBox.children[index - 1].classList.add('active')
    flag = true
}
overOut()
function overOut () {
    bgc.addEventListener('mouseover', () => {
        clearInterval(timer)
    })
    bgc.addEventListener('mouseout', () => {
        autoPlay()
    })
}
bindEvent()
function bindEvent () {
    bgc.addEventListener('click', e => {
        if (e.target.className === 'left') {
            if (flag === false) return
            flag = false
            index--
            move(imgBox, {left: -index * bgc_width}, moveEnd)
        }
        if (e.target.className === 'right') {
            if (flag === false) return
            flag = false
            index++
            move(imgBox, {left: -index * bgc_width}, moveEnd)
        }
        if (e.target.className === 'item') {
            if (flag === false) return
            flag = false
            index = e.target.dataset.point - 0 + 1
            move(imgBox, {left: -index * bgc_width}, moveEnd)
        }
    })
}
changeTab()
function changeTab () {
    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') clearInterval(timer)
        if (document.visibilityState === 'visible') autoPlay()
    })
}






/* 渲染 */
const listBox = document.querySelector('.caidan > .list')
const contentBox = document.querySelector('.caidan > .xia > .content')
getGoodsList()
async function getGoodsList() {
  const reg = await pAjax({
    url: '/yiji',
    dataType: 'JSON'
  })
  // console.log(reg)
  // console.log(reg.data.category)
  // console.log(reg.data.category.length)
  let ste = `
  <li class="li">
        <a href="../htnl/list.html">
          <span></span>
          全部...
      </a>
  </li>
  `
  reg.data.category.forEach(item => {
    ste += `
    <li data-id="${ item.id }">${ item.name }</li>
    `
  })
  listBox.innerHTML = ste
}



// listBox.innerHTML = str
// listBox.addEventListener('mouseover', async e => {
//   if (e.target.nodeName === 'LI') {
//     const id = e.target.dataset.id
//     console.log(id)

//     if (!id) return

//     const res = await pAjax({
//       url: '/caidan',
//       data: {
//         type: 'pc_index_category',
//         id: 30
//       },
//       dataType: 'json'
//     })

//     // console.log(res)

//     let str = ''
//     res.data.secondary.forEach(item => {
//       str += `
//       <li>
//           <img src="${ item.pic }" alt="">
//           <span class="mz">${ item.name }</span>
//       </li>
//       `
//     })

//     contentBox.innerHTML = str
//     contentBox.parentElement.style.display = 'block'
//   }
// })



listBox.addEventListener('mouseover', async e => {
  if (e.target.nodeName === 'LI') {
    const id = e.target.dataset.id
    // console.log(id)

    if (!id) return

    const res = await pAjax({
      url: '/caidan',
      data: {
        type: 'pc_index_category',
        id: id
      },
      dataType: 'json'
    })

    // console.log(res)

    let str = ''
    res.data.secondary.forEach(item => {
      str += `
      <li>
          <img src="${ item.pic }" alt="">
          <span class="mz">${ item.name }</span>
      </li>
      `
    })

    contentBox.innerHTML = str
    contentBox.parentElement.style.display = 'block'
    contentBox.addEventListener('mouseover', () => {
      contentBox.parentElement.style.display = 'block'
    })
    contentBox.addEventListener('mouseout', () => {
      contentBox.parentElement.style.display = 'none'
    })
  }
})
listBox.addEventListener('mouseout', () => {
  contentBox.parentElement.style.display = 'none'
})









  // const res = await pAjax({
  //   url: '/caidan',
  //   data: {
  //     type: 'pc_index_category',
  //     id: 30
  //   },
  //   dataType: 'json'
  // })
  // // console.log(res)
  // // console.log(res.data.secondary)
  // let str = ''
  // res.data.secondary.forEach(item => {
  //   str += `
  //   <li>
  //       <img src="${ item.pic }" alt="">
  //       <span class="mz">${ item.name }</span>
  //   </li>
  //   `
  // })
  
  
/* 图片渲染--六个相同结构的 */


const hotBox = document.querySelector('.hot')
const strBox = document.querySelector('.str')
const anquanBox = document.querySelector('.ste')
const xingcheBox = document.querySelector('.stw')
const jiqirenBox = document.querySelector('.stq')
const zhinengBox = document.querySelector('.sty')
const hulianBox = document.querySelector('.stu')
tupian()
async function tupian () {
  const res = await pAjax({
    url: '/tupian',
    data: '' ,
    dataType: 'JSON'
  })
  // console.log(res)
  // console.log(res.data.floors)
  res.data.floors.forEach(item => {
    // console.log(item)
    if (item.title === '家庭安防'){
      // console.log(item)
      // console.log(item.name)
      // console.log(item.data.list)
      let str = `
      <span class="da">
          <img src="https://p5.ssl.qhimg.com/t01b3f0ea7d9f0b5000.webp" alt="">
      </span>
      `
      // item.data.poster.forEach( async e => {
      //   str = `
      //   <span class="da">
      //       <img src="${ e.pic }" alt="">
      //   </span>
      //   `
      // })
      item.data.list.forEach(e => {
        // console.log(e.pic)
        // console.log(e.title)
        // console.log(e.desc)
        // e.label 如果是一个 '' 不要span
        // e.label 如果是一个 'sad' 要span
        str += `
          <li>
              <span style="display: ${ e.label === '' ? 'none' : 'block' };">${ e.label }</span>
              <img src="${ e.pic }" alt="">
              <i class="cu">${ e.title }</i>
              <i class="xi">${ e.desc }</i>
              <div class="wai">
                  <p class="pri">￥ ${ e.currentPrice }</p>
                  <p class="oldpri">￥ ${ e.originPrice }</p>
              </div>
          </li>
        `
      })
      strBox.innerHTML = str
      
    }
    if (item.title === '安全路由'){
      // console.log(item)
      let str = `
      <span class="da">
          <img src="https://p2.ssl.qhimg.com/t01450436bc349ddae5.jpg" alt="">
      </span>
      `
      item.data.list.forEach(e => {
        str += `
          <li>
              <span style="display: ${ e.label === '' ? 'none' : 'block' };">${ e.label }</span>
              <img src="${ e.pic }" alt="">
              <i class="cu">${ e.title }</i>
              <i class="xi">${ e.desc }</i>
              <div class="wai">
                  <p class="pri">￥ ${ e.currentPrice }</p>
                  <p class="oldpri">￥ ${ e.originPrice }</p>
              </div>
          </li>
        `
      })
      anquanBox.innerHTML = str
    }
    if (item.title === '行车安全'){
      // console.log(item)
      let str = `
      <span class="da">
          <img src="https://p4.ssl.qhimg.com/t0133be414b0dd21744.jpg" alt="">
      </span>
      `
      item.data.list.forEach(e => {
        str += `
          <li>
              <span style="display: ${ e.label === '' ? 'none' : 'block' };">${ e.label }</span>
              <img src="${ e.pic }" alt="">
              <i class="cu">${ e.title }</i>
              <i class="xi">${ e.desc }</i>
              <div class="wai">
                  <p class="pri">￥ ${ e.currentPrice }</p>
                  <p class="oldpri">￥ ${ e.originPrice }</p>
              </div>
          </li>
        `
      })
      xingcheBox.innerHTML = str
    }
    if (item.title === '扫地机器人'){
      // console.log(item)
      let str = `
      <span class="da">
          <img src="https://p2.ssl.qhimg.com/t010270e51d5a815568.jpg" alt="">
      </span>
      `
      item.data.list.forEach(e => {
        str += `
          <li>
              <span style="display: ${ e.label === '' ? 'none' : 'block' };">${ e.label }</span>
              <img src="${ e.pic }" alt="">
              <i class="cu">${ e.title }</i>
              <i class="xi">${ e.desc }</i>
              <div class="wai">
                  <p class="pri">￥ ${ e.currentPrice }</p>
                  <p class="oldpri">￥ ${ e.originPrice }</p>
              </div>
          </li>
        `
      })
      jiqirenBox.innerHTML = str
    }
    if (item.title === '智能守护'){
      // console.log(item)
      let str = `
      <span class="da">
          <img src="https://p3.ssl.qhimg.com/t0118faff228911ab53.jpg" alt="">
      </span>
      `
      item.data.list.forEach(e => {
        str += `
          <li>
              <span style="display: ${ e.label === '' ? 'none' : 'block' };">${ e.label }</span>
              <img src="${ e.pic }" alt="">
              <i class="cu">${ e.title }</i>
              <i class="xi">${ e.desc }</i>
              <div class="wai">
                  <p class="pri">￥ ${ e.currentPrice }</p>
                  <p class="oldpri">￥ ${ e.originPrice }</p>
              </div>
          </li>
        `
      })
      zhinengBox.innerHTML = str
    }
    if (item.title === '生态互联'){
      // console.log(item)
      let str = `
      <span class="da">
          <img src="https://p5.ssl.qhimg.com/t01b1999ef9da609b19.jpg" alt="">
      </span>
      `
      item.data.list.forEach(e => {
        str += `
          <li>
              <span style="display: ${ e.label === '' ? 'none' : 'block' };">${ e.label }</span>
              <img src="${ e.pic }" alt="">
              <i class="cu">${ e.title }</i>
              <i class="xi">${ e.desc }</i>
              <div class="wai">
                  <p class="pri">￥ ${ e.currentPrice }</p>
                  <p class="oldpri">￥ ${ e.originPrice }</p>
              </div>
          </li>
        `
      })
      hulianBox.innerHTML = str
    }
  })
}

/* 更多图片渲染 */
const shangBox = document.querySelector('.more > .shang')
more()
function more () {
  const script = document.createElement('script')

  script.src = 'https://search.mall.360.cn/search/latest?callback=handler&q=*&size=20&page=0&_=1639448721415'
  
  document.body.appendChild(script)
  script.remove()
}

function handler(res) {
  // console.log(res)
  let str = ''
  res.data.list.forEach(item => {
    // console.log(item)
    str += `
    <li>
        <img src="${ item.img }" alt="">
        <p class="cu">${ item.title }</p>
        <div class="pri">￥ ${ item.price }</div>
        <span style=" display:${ item.tagString ? 'block' : 'none'}">${ item.tagString }</span>
    </li>
    `
  })
  shangBox.innerHTML = str
}
/* 更多图片渲染 */
const xiaBox = document.querySelector('.more > .xia')
mores()
function mores () {
  const script = document.createElement('script')

  script.src = 'https://search.mall.360.cn/search/latest?callback=handlers&q=*&size=20&page=1&_=1639448721416'
  
  document.body.appendChild(script)
  script.remove()
}

function handlers(res) {
  // console.log(res)
  let str = ''
  res.data.list.forEach(item => {
    // console.log(item)
    str += `
    <li>
        <img src="${ item.img }" alt="">
        <p class="cu">${ item.title }</p>
        <div class="pri">￥ ${ item.price }</div>
        <span style=" display:${ item.tagString ? 'block' : 'none'}">${ item.tagString }</span>
    </li>
    `
  })
  xiaBox.innerHTML = str
}